import React from 'react';
import {
  View,
  Image,
  Text,
  StyleSheet,
  TouchableOpacity,
  Platform
} from 'react-native';

import CommonListPage from '../common/CommonListPage';
import SizeUtils from '../../common/SizeUtils';
import Config from '../../config';
import CommonDataListView from '../common/CommonDataListView';
import VipActivityRequestListAction from '../../actions/vipsercard/VipActivityRequestListAction';
import BaseItem from '../common/BaseItem';
import CommonStyles from '../../common/CommonStyles';
import {DateUtils} from '../../utils/Utils';
import TImage from '../../components/TImage';

const BTN_LABELS = ["合作商家", "限时特供"];
const ITEM_HEIGHT = 160;

export default class VipActivityXianshiPage extends CommonListPage {
  constructor(props) {
    super(props);

    this._showType = 0;
    this._viewPager = null;
    this._noEmpty = true;
  }

  _getListViewStyle() {
    return {
        alignItems: 'center',
        width:SizeUtils.getWindowSize().width - SizeUtils.translateDesignWidthToCode(25),
        height:(SizeUtils.getWindowSize().height - Config.paddingTop),
        backgroundColor:"#ffffff"};
  }

  _getViewStyle() {
    return {paddingTop:Platform.OS === "ios"?(Config.paddingTop + SizeUtils.translateDesignHeightToCode(20)):SizeUtils.translateDesignHeightToCode(66),justifyContent: 'space-around',
        paddingLeft:SizeUtils.translateDesignHeightToCode(20), backgroundColor:"#ffffff"}
  }

  _requestData(page, listView) {
      //new VipActivityRequestListAction().call(listView, {page:page, page_size:10, sort_id:1, tag:this._showType + 1});
      new VipActivityRequestListAction().call(listView, {page:page, page_size:10, sort_id:1, tag:this.props.pageData.routeData.buttonData.showType + 1});
      this._listView.doRefresh();
  }

  // _onRenderHeader() {
  //   return(
  //       <View style={{backgroundColor:"#ffffff",
  //         paddingBottom:SizeUtils.translateDesignHeightToCode(20)}}>
  //         {this._renderTypeBtns()}
  //       </View>
  //   )
  // }

  _renderTypeBtns() {
    return(
      <View style={{flexDirection:"row", marginLeft:SizeUtils.translateDesignWidthToCode(40),paddingTop: SizeUtils.translateDesignHeightToCode(40),
          marginRight:SizeUtils.translateDesignWidthToCode(40),justifyContent:"space-around"}}>
        {BTN_LABELS.map((value, index) => {return this._renderBtnText(value, index)})}
      </View>
    )
  }

  _onRenderItem(data, rowID) {
    return (
      <Item key={rowID} data={data} rowID={rowID} onPress={() => {this.gotoPage(Config.pages.vipactivitycontentpage, data)}}/>
    )
  }

  _renderBtnText(value, index) {
    return (
      <TouchableOpacity key={index} onPress={() => {this._onPressTypeBtn(index)}}
          style={[this._getButtonContainerStyle(index),
            {height:SizeUtils.translateDesignHeightToCode(45),
              borderBottomWidth: this._showType == index ? SizeUtils.translateDesignNumToCode(3) : 0}]}>
        <Text style={[this._getButtonTextStyle(index),
          {fontSize:SizeUtils.translateFontSizeToCode(32)}]}>
          {value}
        </Text>
      </TouchableOpacity>
    )
  }

  _getButtonTextStyle(index) {
    if(this._showType == index) {
      return style.btn_selected;
    }
    return style.btn_unselected;
  }

  _getButtonContainerStyle(index) {
    if(this._showType == index) {
      return style.container_selected;
    }
    return style.container_unSelected;
  }

  _onPressTypeBtn(index) {
    if(!this.state.isRefreshing) {
      this._showType = index;
      this._listView.doRefresh();
    }
  }
}

class Item extends BaseItem {
  constructor(props) {
    super(props);
  }

  shouldComponentUpdate(nextProps, nextState) {
    return this.props.data != nextProps.data;
  }

  render() {
    return (
        <TouchableOpacity
          onPress={this.props.onPress}
          style={{flex:1, flexDirection:"row",
              alignItems: 'center',
              paddingLeft:SizeUtils.translateDesignWidthToCode(10),backgroundColor:"#ffffff",
              width:SizeUtils.translateDesignWidthToCode(715),
              paddingRight:SizeUtils.translateDesignWidthToCode(40), borderColor:"#eeeeee",
              paddingBottom:SizeUtils.translateDesignHeightToCode(20),
              paddingTop:SizeUtils.translateDesignHeightToCode(20),
              borderBottomWidth:SizeUtils.translateDesignNumToCode(3)}}>
            <TImage source={this._getImageSource(this.props.data)}
              style={{width:180,
                height:180}}/>
            <View style={{flex:1, flexDirection: "column", paddingTop:SizeUtils.translateDesignHeightToCode(0),
                  left:SizeUtils.translateDesignWidthToCode(20)}}>
                <View>
                  <Text numberOfLines={2}
                    style={[CommonStyles.primaryText, {fontSize:SizeUtils.translateFontSizeToCode(32)}]}>
                      {this.props.data.title}
                  </Text>
                </View>
                <View style={{paddingTop:SizeUtils.translateDesignHeightToCode(100)}}>
                  <Text style={[CommonStyles.assistText, {fontSize:SizeUtils.translateFontSizeToCode(24)}]}>发布时间：{this.props.data.posted_at}</Text>
                </View>
            </View>
        </TouchableOpacity>

    )
  }
  //<Text
    //style={[CommonStyles.secondaryText, {fontSize:SizeUtils.translateFontSizeToCode(26),
        //paddingTop:SizeUtils.translateDesignHeightToCode(20)}]}>
        //{this.props.data.content}
  //</Text>

  _getImageSource(data) {
    console.log("_getImageSource", data.image_urls[0]);
    if(data.image_urls[0]) {
      return {uri: data.image_urls[0]};
    }
    else {
      return {uri: ""};
    }
  }

  _getTimeStr(time) {
    var timeStr = DateUtils.formatActivity(time)
    return timeStr;
  }
}



let style = StyleSheet.create({
  container_selected: {
    borderBottomColor: "#db3132",
  },

  container_unSelected: {
  },

  btn_selected: {
    color: "#db3132",
  },

  btn_unselected: {
    color: "#999999",
  },
});
